<template lang="html">
  <div>
  <div class="step1 box">
    <div class="p-r upA">
      <el-upload
        class="avatar-uploader"
        action="https://bird.ioliu.cn/v1?url=https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="upSucA"
        :on-error="upErrA"
        :before-upload="beforeUpAUpload">
        <img v-if="imageUrlA" :src="imageUrlA" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    <div class="p-r upB">
      <el-upload
        class="avatar-uploader"
        action="https://bird.ioliu.cn/v1?url=https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="upSucB"
        :on-error="upErrA"
        :before-upload="beforeUpAUpload">
        <img v-if="imageUrlB" :src="imageUrlB" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>

    <el-button type="warning" name="button" @click="$emit('sonEmite','aaaa')">点我免验证通过</el-button>
  </div>
    <div class="fixBtnShim"></div>
    <a href="javascript:void(0)" class="fixBtn" @click="myEmite"><span>下一步</span></a>
  </div>
</template>

<script>
import {Upload, Dialog, Message} from 'element-ui'
import {mapGetters } from 'vuex'

export default {
  components: {
    elUpload:Upload,elDialog:Dialog
  },
  data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        imageUrlA: require('@/assets/img/updateBg1.jpg'),
        imageUrlB: require('@/assets/img/updateBg2.jpg'),
        upASuc:false,
        upBSuc:false,
        img_list: [
            //  {
            //      name: 'test.jpeg',
            //      url : 'https://dummyimage.com/750x480/b293a4/fff&text=someImg',
            //  },
        ],
      };
    },
    methods: {
      ...mapGetters([
        'starLoading','closeLoading'
      ]),
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      myEmite(pars) {
        if(this.upASuc && this.upBSuc){
          this.$emit('sonEmite','aaaa');
        }else{
          Message.error('请上传完整的身份证信息');
        }

      },
      upErrA(err, file, fileList){
        this.closeLoading()();
        Message.error('抱歉 服务器出错! 请重新上传');
      },
      upSucA(response, file, fileList){
        console.log('up response：',response);
        if(response.id === 101){
          this.closeLoading()();
          Message.error('抱歉 服务器出错! 请重新上传');
          return;
        }
        console.log(URL.createObjectURL(file.raw));
        this.imageUrlA = URL.createObjectURL(file.raw);
        this.upASuc = true;
      },
      upSucB(response, file, fileList){
        console.log('up response：',response);
        if(response.id === 101){
          this.closeLoading()();
          Message.error('抱歉 服务器出错! 请重新上传');
          return;
        }
        console.log(URL.createObjectURL(file.raw));
        this.imageUrlA = URL.createObjectURL(file.raw);
        this.upBSuc = true;
      },
      beforeUpAUpload(file) {
        console.log(file.type);
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const checkType = (isJPG || isPNG);
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!(isJPG || isPNG)) {
          Message.error('上传头像图片只能是JPG或者PNG 格式!');
        }
        else if (!isLt2M) {
          Message.error('上传头像图片大小不能超过 2MB!');
        } else {
          this.starLoading()()
        }
        console.log(23333,!(isJPG || isPNG));

        return (isJPG || isPNG) && isLt2M;
      }
    }
}
</script>

<style lang="scss">
.step1{
  padding:0 .22rem;
  .el-upload--picture-card{width:100%;height:4.36rem;line-height:4.36rem;}
  .el-upload--picture-card img{width: 100%;}
  .el-upload-list--picture-card .el-upload-list__item{width:100%;height:4.36rem;margin:0;}
  .avatar-uploader img{width: 100%}
  .upB{margin-top:.2rem;}
}
</style>
